<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <body>
        <ui:composition>
            <h:outputScript target="head" library="javascript" name="modernizr.js"></h:outputScript>
            <h:form styleClass="noWhiteForm" style="display:block" id="headerForm">
                <p:growl id="growl"/>
                <div class="headerContainer floatLeft inlineBlock">
                    <div class="logoContainer inlineBlock">
                        <p:commandLink styleClass="logoLink" action="#{loginBean.goIndex()}">
                            <h:graphicImage alt="TheRecruitery. Tu portal de empleo cara al público" library="images" name="logo.png"></h:graphicImage>
                        </p:commandLink>
                    </div>
                </div>
                <p:panel style="width:450px;" styleClass="noBorder noMargin noPadding inlineBlock floatRight">
                    
                    <p:panel styleClass="inlineBlock headerIconPanel">
                        <h:outputLink value="https://www.youtube.com/user/TheRecruitery" target="_blank">
                            <h:graphicImage styleClass="headerIcon" library="icons" name="youtube.png" value="youtube" alt="youtube"/>
                        </h:outputLink>
                    </p:panel>
                    <p:panel styleClass="inlineBlock headerIconPanel">
                        <h:outputLink value="https://www.linkedin.com/company/therecruitery" target="_blank">
                            <h:graphicImage styleClass="headerIcon" library="icons" name="linkedin.png" value="linkedin" alt="linkedin"/>
                        </h:outputLink>
                    </p:panel>
                    <p:panel styleClass="inlineBlock headerIconPanel">
                        <h:outputLink value="https://www.twitter.com/TheRecruitery" target="_blank">
                            <h:graphicImage styleClass="headerIcon" library="icons" name="twitter.png" value="twitter" alt="twitter"/>
                        </h:outputLink>
                    </p:panel>
                    <p:panel styleClass="inlineBlock headerIconPanel">
                        <h:outputLink value="https://www.facebook.com/TheRecruitery" target="_blank">
                            <h:graphicImage styleClass="headerIcon" library="icons" name="facebook.png" value="facebook" alt="facebook"/>
                        </h:outputLink>
                    </p:panel>
                    <div class="suggestionsDiv inlineBlock">
                        <p:commandLink update=":suggestionsForm:suggestionsDialog" oncomplete="suggestionsDialog.show()">
                            
                            <h:outputText class="suggestionsText" value="#{messages.SuggestionsText} "></h:outputText>
                        </p:commandLink>                
                    </div>
                </p:panel>
                
                
            </h:form>
            <h:form id="suggestionsForm">
                <p:dialog modal="true" style="width:500px;" header="#{messages.Contact}" resizable="false" id="suggestionsDialog" widgetVar="suggestionsDialog" rendered="true" draggable="true" closable="true"> 
                    <p:panel id="suggestionsPanel" styleClass="noBorder noPadding noMargin">
                        <h:panelGrid  styleClass="noBorderSpacing" columns="1">  
                            <p:outputLabel for="name" value="#{messages.Name}" />
                            <p:inputText id="name" required="true" value="#{suggestionsBean.name}"  requiredMessage="#{messages.NameRequired}" label="#{messages.Name}">  
                                <p:ajax event="change"  update=":headerForm:growl" />
                            </p:inputText>  
                            <p:outputLabel for="email" value="#{messages.Email}" />
                            <p:inputText id="email" required="true" value="#{suggestionsBean.email}"  requiredMessage="#{messages.EmailRequired}" label="#{messages.Email}">
                                <p:ajax event="change" update=":headerForm:growl" />
                            </p:inputText>
                            <p:outputLabel for="suggestionContent" value="#{messages.Message}" />
                            <p:inputTextarea autoResize="false" required="true" styleClass="ui-inputtext summaryTextArea" counterTemplate="{0} #{messages.CharactersRemaining}" id="suggestionContent" value="#{suggestionsBean.content}" maxlength="1024" counter="counter">
                                <p:ajax event="change" update=":headerForm:growl" />
                            </p:inputTextarea>
                            <h:outputText styleClass="bodyText" id="counter" />
                        </h:panelGrid>
                        <p:commandButton id="sendEmail"  value="#{messages.Send}" oncomplete="suggestionsDialog.hide()" actionListener="#{suggestionsBean.createNewSuggestion()}"/>
                    </p:panel>
                </p:dialog>
            </h:form>
        </ui:composition>
    </body>
</html>

